<template>
    <div class="order-card">
        <div class="card-detail" v-for="(item,index) in content" :key="index">
            <div class="order-num">
                <div class="num">
                    <span>订单编号: </span>
                    <span>{{item['order_num']}}</span>
                </div>
                <div class="stantard">
                    <span>{{item['order_status']}}</span>
                </div>
            </div>
            <div class="order-product-all">
                <div class="product-img">
                    <img :src="item['image_url']" alt="">
                </div>
                <div class="product-msg">
                    <p>{{item.name}}</p>
                    <p>{{item.content}}</p>
                    <div class="product-price">
                        <span>￥{{item.price}}</span>
                        <span>x</span>
                        <span>{{item['number']}}</span>
                    </div>
                </div>
            </div>
            <div class="order-stantard">
                <span>{{item['order_status']}}</span>
                <span>￥{{item['pay_money']}}</span>
            </div>
            <div class="order-btns">
                <div class="order-btn" v-if="btn == 'waitPayment'" @click="cancelOrder(item['order_num'])">
                    <span>取消订单</span>
                </div>
                <div class="order-btn" v-if="btn == 'waitPayment'" @click="toCreateOrder(item)">
                    <span>去付款</span>
                </div>
                <div class="order-btn" v-if="btn == 'waitDeliver'" @click="remindDeliver(item['order_num'])">
                    <span>提醒发货</span>
                </div>
                <div class="order-btn" v-if="btn == 'refund'" @click="exchange(item['order_num'])">
                    <span>申请退换</span>
                </div>
                <div class="order-btn" v-if="btn == 'waitGoods'"  @click="toExpress(item['express_num'])">
                    <span>查看物流</span>
                </div>
                <div class="order-btn" v-if="btn == 'waitGoods'" @click="configGet(item['order_num'])">
                    <span>确认收货</span>
                </div>
                <div class="order-btn" v-if="btn == 'waitComment'" @click="toComment(item['order_num'],item['goods_id'])">
                    <span>商品评价</span>
                </div>
                <div class="order-btn" @click="toDetail(item['id'])">
                    <span>订单详情</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'orderCard',
    props:['content', 'btn'],
    methods:{
        toComment(orderId, productId){
            this.$router.push({name:'comment', params:{orderId:orderId, productId:productId}});
        },
        toCreateOrder(item){
            sessionStorage.setItem('order', item['order_num']);
            this.$router.push('/create_order');
        },
        remindDeliver(id){
            // console.log(id);
            let that = this;
            let token = localStorage.getItem('token');
            let loader = that.loading('信息发送中...');
            that.$ajax(that, 'post', that.$api.remindDeliver, {'order_num':id}, token, function(res){
                if(res.data['error_code'] == 0){
                    that.toast('已提醒卖家发货！');
                }else{
                    that.toast(res.data['msg']);
                }
                loader.close();
            })
        },
        exchange(id){
            let that = this;
            let token = localStorage.getItem('token');
            let loader = that.loading('信息发送中...');
            that.$ajax(that, 'post', that.$api.exchange, {'order_num':id}, token, function(res){
                if(res.data['error_code'] == 0){
                    that.toast('卖家会稍后联系您，请保持电话通畅！');
                }else{
                    that.toast(res.data['msg']);
                }
                loader.close();
            }) 
        },
        configGet(id){
           let that = this;
            let token = localStorage.getItem('token');
            that.$ajax(that, 'post', that.$api.configGet, {'order_num':id}, token, function(res){
                console.log(res);
                if(res.data['error_code'] == 0){
                    that.toast('确认收货成功！');
                }else{
                    that.toast(res.data['msg']);
                }
            })  
        },
        toDetail(id){
            this.$router.push({path:'/order_detail', query:{orderId:id}});
        },
        cancelOrder(id){
            let that = this;
            let token = localStorage.getItem('token');
            let loader = that.loading();
            that.$ajax(that, 'post', that.$api.cancelOrder, {'order_num':id}, token, function(res){
                if(res.data['error_code'] == 0){
                    that.toast('订单取消成功');
                    that.$emit('cancelOrder');
                }else{
                    that.toast(res.data.msg);
                }
                loader.close();
            })
        },
        toExpress(id){
            this.$router.push({path:'/express', query:{expressId:id}});
        }
    },
    mounted(){
        //console.log(this.content);
    }
}
</script>

<style lang='less'>
@rem:100rem;

.order-card{
    width: 100%;
    padding-bottom: 100/@rem;
    .card-detail{
        background: #ffffff;
        margin-top: 20/@rem;
        .order-num{
            width: 100%;
            box-sizing: border-box;
            padding: 0 20/@rem;
            height: 82/@rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #f0f0f0;
        }
        .order-product-all{
            width: 710/@rem;
            height: 242/@rem;
            margin: 0 auto;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #f0f0f0;
            .product-img{
                width: 168/@rem;
                height: 168/@rem;
                img{
                    width: 168/@rem;
                    height: 168/@rem;
                }
            }
            .product-msg{
                text-align: start;
                margin-left: 30/@rem;
                p:nth-of-type(1){
                    width: 100%;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
                p:nth-of-type(2){
                    font-size: 24/@rem;
                    color: #868686;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    margin-top: 24/@rem;
                }
                .product-price{
                    margin-top: 36/@rem;
                    span{
                        font-size: 28/@rem;
                    }
                    span:nth-of-type(2){
                        color: #868686;
                    }
                }
            }
        }
        .order-stantard{
            width: 100%;
            height: 60/@rem;
            box-sizing: border-box;
            padding: 0 20/@rem;
            margin-top: 20/@rem;
            display: flex;
            justify-content: space-between;
            span:nth-of-type(1){
                color: #868686;
            }
            span:nth-of-type(2){
                font-size: 28/@rem;
                color: #fd4141;
            }
        }
        .order-btns{
            width: 100%;
            box-sizing: border-box;
            padding: 0 20/@rem;
            display: flex;
            justify-content: flex-end;
            margin-top: 54/@rem;
            padding-bottom: 20/@rem;
            .order-btn{
                width: 170/@rem;
                height: 60/@rem;
                line-height: 60/@rem;
                border-radius: 6/@rem;
                border: 2/@rem solid #e7e7e7;
            }
            .order-btn:active{
                background: #ededed;
            }
            .order-btn{
                margin:0 10/@rem;
            }
        }
    }
}
</style>
